import 'package:flutter/material.dart';

void main() => runApp(BottomNavigationBarDemo());

class BottomNavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 当前选中项的索引
  int _selectedIndex = 1;

  // 导航栏按钮选中对应数据
  final _widgetOptions = [
    Text('Index 0: 信息'),
    Text('Index 1: 通讯录'),
    Text('Index 2: 发现'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 顶部应用按钮
      appBar: AppBar(
        title: Text('BottomNavigationBar 示例'),
      ),
      // 中间内容显示区域
      body: Center(
        // 居中显示某一个文本
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      // 底部导航按钮集
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          // 底部导航按钮，包含图标及文本
          BottomNavigationBarItem(
              icon: Icon(Icons.chat), title: Text('信息')),
          BottomNavigationBarItem(
              icon: Icon(Icons.contacts), title: Text('通讯录')),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text('发现')),
        ],
        // 当前选中项的索引
        currentIndex: _selectedIndex,
        // 选中项的颜色
        fixedColor: Colors.deepPurple,
        // 选中按下处理
        onTap: _onItemTapped,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}
